<template>
  <div>
    用户名:
    <input
        type="text" v-model="loginForm.username" placeholder="请输入用户名" />
    <br /><br />
    密码:
    <input
        type="password" v-model="loginForm.password" placeholder="请输入密码" />
    <br /><br />
    验证码:
    <input
        type="text" v-model="loginForm.verifyCode" placeholder="请输入验证码" />
        <img :src="loginForm.src" @click="refreshCaptcha" />
    <br /><br />
      <button v-on:click="login">登录</button>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data () {
      return {
        loginForm: {
          username: "admin",
          password: "yankai",
          verifyCode: "",
          src: ""
        },
        result: []
      }
    },
    methods: {
      login () {
        this.$axios
          .post("/login", {
            username: this.loginForm.username,
            password: this.loginForm.password,
            verifyCode: this.loginForm.verifyCode
          })
          .then(res => {
            if (res.state === 1) {
            this.$router.replace({ path: "/index" })
            }
          })  
      },
      refreshCaptcha: function() {
      this.loginForm.src ="http://localhost:1314/verifyCode?t=" + new Date().getTime();
      }
    },
    mounted() {
        this.refreshCaptcha(); //刷新验证码
    }
  }
</script>

